{% extends "base.html" %}

{% block title %}批量视频裁剪 - BBDown Web UI{% endblock %}

{% block extra_css %}
<style>
    .video-list {
        margin-top: 1rem;
    }
    
    .video-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        background: #fff;
        border-radius: 8px;
        margin-bottom: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,.08);
    }
    
    .video-info {
        flex: 1;
    }
    
    .video-info h4 {
        margin: 0 0 0.5rem;
        font-size: 1.1rem;
        color: #202124;
    }
    
    .video-info p {
        margin: 0;
        color: #5f6368;
        font-size: 0.9rem;
    }
    
    .cut-info {
        margin-top: 1rem;
    }
    
    .cut-info textarea {
        font-family: monospace;
        font-size: 0.9rem;
        line-height: 1.5;
        white-space: pre;
        tab-size: 4;
        padding: 1rem;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        resize: vertical;
        width: 100%;
    }
    
    .cut-info textarea:focus {
        background-color: #fff;
        border-color: #1a73e8;
        box-shadow: 0 0 0 2px rgba(26,115,232,.2);
    }
    
    .cut-info .help-text {
        color: #5f6368;
        font-size: 0.9rem;
        margin-top: 0.5rem;
        padding: 0.5rem;
        background-color: #f8f9fa;
        border-radius: 4px;
    }
    
    .result-list {
        margin-top: 2rem;
    }
    
    .result-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        background: #fff;
        border-radius: 8px;
        margin-bottom: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,.08);
    }
    
    .result-info {
        flex: 1;
    }
    
    .result-info h4 {
        margin: 0 0 0.5rem;
        font-size: 1.1rem;
        color: #202124;
    }
    
    .result-info p {
        margin: 0;
        color: #5f6368;
        font-size: 0.9rem;
    }
    
    .result-actions {
        margin-left: 1rem;
    }
    
    .download-btn {
        padding: 0.5rem 1rem;
        background-color: #1a73e8;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }
    
    .download-btn:hover {
        background-color: #1557b0;
        color: white;
        text-decoration: none;
    }
    
    .batch-actions {
        margin-top: 1rem;
        text-align: right;
    }
    
    .select-all {
        margin-right: 1rem;
    }

    .alert {
        margin-top: 1rem;
        border-radius: 8px;
    }

    .progress {
        margin-top: 1rem;
        height: 0.5rem;
        border-radius: 4px;
    }

    .progress-bar {
        background-color: #1a73e8;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #202124;
    }

    .validation-error {
        color: #dc3545;
        font-size: 0.9rem;
        margin-top: 0.5rem;
    }

    .upload-area {
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        padding: 2rem;
        text-align: center;
        background-color: #f8f9fa;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .upload-area:hover {
        border-color: #1a73e8;
        background-color: #f0f7ff;
    }

    .upload-area.dragover {
        border-color: #1a73e8;
        background-color: #e8f0fe;
    }

    .upload-area p {
        margin: 0;
        color: #5f6368;
    }

    .upload-area .upload-icon {
        font-size: 2rem;
        color: #1a73e8;
        margin-bottom: 1rem;
    }

    .upload-progress {
        margin-top: 1rem;
        display: none;
    }

    .video-details {
        margin-top: 1rem;
        padding: 1rem;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,.08);
        display: none;
    }

    .video-details h4 {
        margin: 0 0 0.5rem;
        font-size: 1.1rem;
        color: #202124;
    }

    .video-details p {
        margin: 0;
        color: #5f6368;
        font-size: 0.9rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }

    .btn-clear {
        background-color: #dc3545;
        color: white;
    }

    .btn-clear:hover {
        background-color: #c82333;
        color: white;
    }

    .btn-clear:disabled {
        background-color: #e4606d;
        cursor: not-allowed;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <h1 class="mb-4">批量视频裁剪</h1>
    
    <!-- 视频上传 -->
    <div class="section mb-4">
        <h2>上传视频</h2>
        <div class="upload-area" id="upload-area">
            <div class="upload-icon">
                <i class="fas fa-cloud-upload-alt"></i>
            </div>
            <p>点击或拖拽视频文件到此处上传</p>
            <p class="text-muted">支持 MP4、AVI、MKV 等常见视频格式</p>
            <input type="file" id="video-file" accept="video/*" style="display: none;">
            <div class="upload-progress" id="upload-progress">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
                <p class="mt-2" id="upload-status">准备上传...</p>
            </div>
        </div>
        <!-- 视频信息 -->
        <div class="video-details" id="video-details">
            <h4>视频信息</h4>
            <p>文件名：<span id="video-filename"></span></p>
            <p>文件大小：<span id="video-size"></span></p>
            <p>文件类型：<span id="video-type"></span></p>
        </div>
    </div>
    
    <!-- 裁剪设置 -->
    <div class="section mb-4" id="cut-settings" style="display: none;">
        <h2>裁剪设置</h2>
        <div class="form-group">
            <label>快速添加裁剪记录：</label>
            <div style="display: flex; gap: 8px; margin-bottom: 8px;">
                <input type="text" id="quick-start-time" class="form-control" placeholder="开始时间 HH:MM:SS" style="max-width: 130px;">
                <input type="text" id="quick-end-time" class="form-control" placeholder="结束时间 HH:MM:SS" style="max-width: 130px;">
                <input type="text" id="quick-file-name" class="form-control" placeholder="输出文件名" style="max-width: 180px;">
                <button type="button" class="btn btn-success" id="quick-add-btn">添加</button>
            </div>
        </div>
        <div class="form-group cut-info">
            <label for="cut-info">裁剪信息：</label>
            <textarea class="form-control" id="cut-info" rows="8" placeholder="请输入裁剪信息，每行一条记录，格式：开始时间 结束时间 输出文件名&#10;例如：&#10;00:00:10 00:01:20 片段1&#10;00:02:00 00:03:30 片段2&#10;00:05:00 00:06:15 片段3"></textarea>
            <div class="help-text">
                说明：<br>
                1. 每行一条裁剪记录<br>
                2. 时间格式为 HH:MM:SS（时:分:秒）<br>
                3. 文件名不能包含特殊字符和路径分隔符<br>
                4. 开始时间必须早于结束时间
            </div>
            <div class="alert alert-danger" id="cut-error" style="display: none;"></div>
        </div>
        <div class="progress" style="display: none;">
            <div class="progress-bar" role="progressbar" style="width: 0%"></div>
        </div>
        <div class="action-buttons">
            <button type="button" class="btn btn-primary" id="start-cut" disabled>开始裁剪</button>
            <button type="button" class="btn btn-clear" id="clear-form" disabled>清空表单</button>
        </div>
    </div>

    <!-- 裁剪结果 -->
    <div class="section" id="cut-results" style="display: none;">
        <h2>裁剪结果</h2>
        <div class="mb-3">
            <button type="button" class="btn btn-success" id="download-selected">下载选中文件</button>
            <button type="button" class="btn btn-primary" id="select-all">全选</button>
        </div>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="select-all-checkbox"></th>
                        <th>文件名</th>
                        <th>进度</th>
                        <th>大小</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="cut-files-list">
                    <!-- 裁剪结果将通过JavaScript动态填充 -->
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/cut_video.js"></script>
{% endblock %} 